<template>
  <!-- 外层容器 -->
  <el-container>
    <!-- 侧边栏容器 -->
    <div>
      <el-aside :class="['sidebar', { narrow: !isCollapse }]" :collapse="isCollapse">
        <el-menu
          default-active="shou"
          unique-opened
          background-color="#304156"
          text-color="#BFCBD9"
          style="border-right: none"
          active-text-color="#409EFF"
          router
          :collapse="collapse"
        >
        <el-menu-item index="shou">
					<i class="el-icon-s-home"></i>
					<span slot="title">网站主页</span>
				</el-menu-item>


				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-delete-solid"></i>
						<span>系统管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="2-1">用户管理</el-menu-item>
						<el-menu-item index="2-2">公告管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-s-goods"></i>
						<span>师资管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="3-1">咨询师管理</el-menu-item>
						<el-menu-item index="3-2">咨询师等级管理</el-menu-item>
						<el-menu-item index="3-3">擅长领域管理</el-menu-item>
						<el-menu-item index="3-4">证书管理</el-menu-item>
						<el-menu-item index="3-5">收费标准管理</el-menu-item>
            <el-menu-item index="3-6">咨询预约管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title">
						<i class="el-icon-s-open"></i>
						<span>内容管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="4-1">文章管理</el-menu-item>
						<el-menu-item index="4-2">文章分类管理</el-menu-item>
						<el-menu-item index="4-3">课程管理</el-menu-item>
						<el-menu-item index="4-4">课程分类管理</el-menu-item>
						<el-menu-item index="4-5">课堂问题管理</el-menu-item>
						<el-menu-item index="4-6">课程评价管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

				<el-submenu index="5">
					<template slot="title">
						<i class="el-icon-s-open"></i>
						<span>知识管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="5-1">心理知识管理</el-menu-item>
						<el-menu-item index="5-2">心理测评分类管理</el-menu-item>
						<el-menu-item index="5-3">心理测评管理</el-menu-item>
						<el-menu-item index="5-4">FM管理</el-menu-item>
						<el-menu-item index="5-5">公益内容管理</el-menu-item>

					</el-menu-item-group>
				</el-submenu>
				<el-menu-item index="6">
					<i class="el-icon-s-flag"></i>
					<span slot="title">公司信息管理</span>
				</el-menu-item>
				<el-menu-item index="7">
					<i class="el-icon-s-management"></i>
					<span slot="title">用户评价管理</span>
				</el-menu-item>
        </el-menu>
      </el-aside>
    </div>

    <el-container>
      <!-- 顶栏容器 -->
      <el-header>
        <div class="header-left" @click="zhank">
          <i :class="src"></i>
        </div>

    
		
        <el-tabs 
		
          v-model="editableTabsValue"
          type="card"
          closable
          @tab-remove="removeTab"
        >
	
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
		 	
            {{ item.content }}
		
          </el-tab-pane>
	
        </el-tabs>
	
        <div class="header-right">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
              <img src="../assets/logo.png" alt="" /> 你好, 刘志强
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">个人中心</el-dropdown-item>
              <el-dropdown-item command="b">修改密码</el-dropdown-item>
              <el-dropdown-item command="c">系统设置</el-dropdown-item>
              <div @click="logout">
                <el-dropdown-item command="d">退出登录</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <!-- 主要区域容器 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      collapse:false,
      isCollapse: true,
      handleCommand:"",
      ditableTabsValue: "2",
      src:"el-icon-s-fold icon",
      title:'',
      editableTabs: [
        {
          title: '首页',
          name: "1",
          
        },
       
      ],
      editableTabsValue:"",

	  
      tabIndex: 1,
    };
  },
  
  methods: {
	
    logout() {
      sessionStorage.removeItem("name"), this.$router.push("/login");
    },
    //展开侧边栏
    zhank() {
      this.isCollapse = !this.isCollapse;
      this.collapse = !this.collapse //== false?true:false
      this.src = this.src == 'el-icon-s-fold icon' ? 'el-icon-s-unfold icon':'el-icon-s-fold icon'
    },
    handleOpen(key, keyPath) {
        
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: targetName,
        name: newTabName,
       
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>

<style>
.el-container {
  height: 100vh;
}


.el-aside {
  background-color: #304156;
  height: 100%;
}
.sidebar {
  width: 210px !important; /* 默认侧边栏宽度 */
  transition: width 0.3s ease; /* 添加过渡效果 */
}

.narrow {
  width: 50px !important; /* 变窄后的侧边栏宽度 */
}

.el-header {
  height: 60px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
.header-left {
  float: left;
}

.header-left .icon {
  font-size: 26px;
  padding-top: 17px;
  cursor: pointer;
}

.el-dropdown-link {
  cursor: pointer;
}

.header-right {
  float: right;
  line-height: 60px;
}

.header-right img {
  height: 50px;
  vertical-align: middle;
}
</style>